<template>
    <el-row>
        <el-col :span="8">
            <div class="mt-4">
                <el-input v-model="input3" style="max-width: 600px" placeholder="请输入商品名" class="input-with-select">
                    <template #prepend>
                        <el-select v-model="select" placeholder="类型" style="width: 115px">
                            <el-option label="无" value="" />
                            <el-option label="商品" value="goods" />
                            <el-option label="需求" value="needs" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="search" />
                    </template>
                </el-input>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <div style="color:#696969;margin-top: 10px;">
                热门搜索：
                <a class="tag-item" @click="handleTopicDetail('苹果')">苹果</a>
                <a class="tag-item" @click="handleTopicDetail('新疆哈密瓜')">新疆哈密瓜</a>
                <a class="tag-item" @click="handleTopicDetail('樱桃')">樱桃</a>
            </div>
        </el-col>
        <el-col>
            <div class="orders">
                <el-image :src="'./src/assets/order/' + orderPic" class="order-img" fit="cover" />
                <i style="color:#696969;font-style:normal;" v-if="orderInfo.type == 'goods'">[供]</i>
                <i style="color:#696969;font-style:normal;" v-else>[需]</i>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue';

const input3 = ref('');
const select = ref('');
const orderPic = ref('0dbd668be84a482ba2749eef5d141424.jpg');
const orderInfo = ref({
    type: 'goods'
})

const search = () => {
    console.log(input3.value);
    console.log(select.value);
}

const handleTopicDetail = (title) => {
    input3.value = title;
}
</script>

<style scoped>
.orders {
    .order-img {
        width: 100px;
        height: 100px;
        border-radius: 10%;
    }
}

.tag-item {
    color: #409eff;
    margin-right: 15px;
    cursor: pointer;
}
</style>